<template>
  <page-layout>
    <a-card class="mb-20">
      <div class="box-ver-hor-between">
        <div class="primary-color">课程详情</div>
        <div>
          <a-button type="primary" v-if="btnIsPowerByCode('unversity:school:new')" @click="editCourse">
            修改
          </a-button>
        </div>
      </div>
    </a-card>

    <readonly-form :fields="form.fields" :data="form.data"/>

    <a-card title="课程描述" size="small">
      <div class="box-ver-center">
        <div v-for="item in form.data.files"
             :key="item.fileId"
             :style="{ backgroundImage: 'url(' + item.url + ')' }"
             class="thumb-item mb-8 mr-10"
        />
      </div>
      <div>
        <p>该图片主要显示于小程序</p>
        <p>支持jpg,png格式</p>
        <p>图片尺寸建议498✖️300,大小不超过500kb</p>
      </div>
      <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
        <img alt="缩略图" style="width: 100%" :src="previewImage"/>
      </a-modal>
      <TinyMCE v-model:value="form.data.describe" :disabled="true"/>
    </a-card>
  </page-layout>
</template>

<script>
import TinyMCE from '@/component/tinymce'
import { selectById } from '@/api/module/courseBaseInfo'
import { useI18n } from 'vue-i18n'
import { reactive, onMounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getBase64 } from '@/tools/common'
import { message } from 'ant-design-vue'
import { btnIsPowerByCode } from '@/tools/common'

export default {
  components: {
    TinyMCE
  },
  setup() {
    const { t } = useI18n()
    const route = useRoute()
    const router = useRouter()

    const previewImage = ref('')
    const previewVisible = ref(false)

    const form = reactive({
      fields: [
        {
          title: '基础信息',
          fields: [
            { span: 6, title: '学科类别', field: 'schoolCnName' },
            { span: 6, title: '课程名称', field: 'courseName' },
            { span: 6, title: '学分', field: 'credit' },
            { span: 6, title: '课程代码', field: 'courseCode' },
            { span: 6, title: '所属项目', field: 'projectName' },
            { span: 6, title: '项目负责人', field: 'schOfficialWebsiteAddress' },
            { span: 24, title: '前置课', field: 'schSchoolSystem' },
            { span: 6, title: '课程以往代码', field: 'coursePastCode' },
            { span: 6, title: '课程首次开设时间', field: 'firstCourseStarttime' },
            { span: 6, title: '课程最近一次审核时间', field: 'courseLastReviewtime' },
            { span: 6, title: '课程最近一次开设时间', field: 'courseLastOpentime' },
          ],
        },
        {
          title: 'SOR',
          fields: 'cbiSorList',
          type: 'array',
          childFields: [
            { span: 6, title: '学校名称', field: 'schId' },
            { span: 6, title: '课程代码', field: 'courseCode' },
            { span: 6, title: '课程名称', field: 'courseName' },
            { span: 6, title: '审核通过时间', field: 'sorAuditTime' }
          ]
        },
      ],
      data: {}
    })

    const handlePreview = async (file) => {
      if (!file.url && !file.preview) {
        file.preview = await getBase64(file.originFileObj)
      }

      previewImage.value = file.url || file.preview
      previewVisible.value = true
    }

    const handleCancel = () => previewVisible.value = false

    const editCourse = () => {
      router.push({
        path: '/university/course-base-info/edit',
        query: route.query
      })
    }

    onMounted(async () => {
      let response = await selectById({ id: route.query.id })

      if (response.code === 500) {
        return message.error('获取详情失败')
      }
    })

    return {
      previewVisible,
      previewImage,
      form,
      t,
      editCourse,
      handleCancel,
      handlePreview,
      btnIsPowerByCode
    }
  }
}
</script>

<style lang="less" scoped>
.thumb-item {
  width: 102px;
  height: 102px;
  background-size: cover;
  background-position: center center;
}
</style>
